import { useState, useCallback, useEffect } from "react";
import { RightOutlined } from "@ant-design/icons";
import type { RadioChangeEvent } from 'antd';
import { Modal, Input, Radio, Space } from "antd";
import { request } from "../../common/request";
import { urls } from "../../common/urls";
import "./index.less";

function UserMark(props: any) {
  const { info } = props;
  const [value, setValue] = useState("");
  const [groupList, setGroupList] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);

  const getList = () => {
    request({
      method: "post",
      data: {
        method: urls.groupOperateList,
      },
    }).then((res: any) => {
      setGroupList(res.data);
    });
  };

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const handleOk = useCallback(
    () => {
      request({
        method: "post",
        data: {
          method: urls.moveGroupOperate,
          f_uid: info.id,
          group_id: value,
        },
      }).then(() => {
        setIsModalOpen(false);
        setValue('');
      });
    }, [info, value]);

  useEffect(() => {
    getList();
  }, [])
  

  return (
    <>
      <div className="link-item" onClick={showModal}>
        <div>分组</div>
        <div>
          {info.group_name}
          <RightOutlined />
        </div>
      </div>
      <Modal
        title="移动分组"
        className="add-user-model add-group-select"
        open={isModalOpen}
        onOk={handleOk}
        okText="确认"
        cancelText="取消"
        onCancel={handleCancel}
      >
      <Radio.Group onChange={onChange} value={value} className="add-user-model-main">
        <Space direction="vertical">
          {
            groupList.map((x: any) => {
              return <Radio 
                value={x.id}
                className="add-user-model-radio"
                key={x.id}
              >{x.name}</Radio>;
            })
          }
        </Space>
      </Radio.Group>
      </Modal>
    </>
  );
}

export default UserMark;
